<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>爱美刻</title>
    <link rel="stylesheet" href="iconfont.css" />
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }
        /* 导航头 */
        .head{
            width: 100%;
            z-index: 100;
            position: fixed;
            top: 0;
            background-color: white;
            height: 65px;
            line-height: 65px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .head1{
            width: 1170px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0 auto;
        }
        .head1>ul{
            display: flex;
        }
        .head1 li{
            margin: auto 20px;
        }
        .head1>ul>li{
            color: #999999;
            position: relative;
        }
        .head1>ul>:first-child{
            color: #333333!important;
        }
        .head1>ul>:first-child:after{
            display: block;
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 32px;
            height: 3px;
            background-color: #4bcabb;
        }
        .head1>ul>li:hover{
            color: #333333;
        }
        .head1>ul>li:hover:after{
            display: block;
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 3px;
            background-color: #4bcabb;
        }
        .head1>ul>:last-child{
            width: 80px;
            height: 36px;
            text-align: center;
            line-height: 36px;
            color: #4bcabb;
            border: 1px solid #4bcabb;
            border-radius: 3px;
        }
        .head1>ul>:last-child:hover{
            background-color: #4bcabb;
            color: white;
        }
        .head1>ul>:last-child:hover:after{
            display: none;
        }
        .box{
            position: relative;
            color: #fcfcfc;
        }
        .box>div{
            position: absolute;
            width: 500px;
            left: calc(50% - 250px);
            top: 300px;
            text-align: center;
        }
        .box p{
            margin: 20px auto;
        }
        .box p:after{
            display: block;
            content: "";
            width: 60px;
            height: 2px;
            background-color: #fcfcfc;
            margin: 20px auto 45px auto;
        }
        div>button{
            all: unset;/* 一键重置所有默认效果 */
            display: block;
            width: 150px;
            height: 42px;
            margin: 15px auto;
            background-color: #4bcabb;
            text-align: center;
            line-height: 42px;
        }
    /*  第二层  */
        .box2{
            background-color: #f9f9f9;
            text-align: center;
            line-height: 60px;
            padding-top: 20px;
        }
        .iconfont{
            color: #4bcabb;
            font-size: 110px;
        }
        .box2>ul{
            display: flex;
            justify-content: center;
        }
        .box2 li{
            margin: 50px 50px;
            font-size: 18px;
            color: #666666;
        }
        .box2-btn{
            width: 150px;
            height: 40px;
            line-height: 40px;
            border-radius: 2px;
            margin: 0 auto;
            background-color: #4bcabb;
            color: white;
            text-align: center;
            font-size: 18px;
        }
        .box2>:last-child{
            color: #999999;
            font-size: 12px;
            display: block;

        }
    /*  第四层  */
        .box4{
            padding-top: 50px;
            text-align: center;
            line-height: 50px;
        }
        .box4>ul{
            display: grid;
            grid-template-columns: repeat(5,1fr);
            padding-bottom: 50px;
        }
        .box4 li{
            margin: 5px;
            height: 165px;
            line-height: 165px;
            font-size: 18px;
            color: white;
            background-repeat: no-repeat;
            background-size: 100%;
        }
        .box4>ul>:first-child{
            background-image: url("https://static.aimeike.tv/assets/img/homepage/category-tag/%E5%A9%9A%E7%A4%BC%E8%A7%86%E9%A2%91.jpg");
        }
        .box4>ul>:nth-child(2){
            background-image: url("https://static.aimeike.tv/assets/img/homepage/category-tag/%E4%BC%81%E4%B8%9A%E5%AE%A3%E4%BC%A0.jpg");
        }
        .box4>ul>:nth-child(3){
            background-image: url("https://static.aimeike.tv/assets/img/homepage/category-tag/%E5%B9%B4%E4%BC%9A%E8%A7%86%E9%A2%91.jpg");
        }
        .box4>ul>:nth-child(4){
            background-image: url("https://static.aimeike.tv/assets/img/homepage/category-tag/%E7%94%9F%E6%97%A5%E7%A5%9D%E7%A6%8F.jpg");
        }
        .box4>ul>:nth-child(5){
            background-image: url("https://static.aimeike.tv/assets/img/homepage/category-tag/%E5%90%8C%E5%AD%A6%E8%81%9A%E4%BC%9A.jpg");
        }
        .box4>ul>:nth-child(6){
            background-image: url("https://static.aimeike.tv/assets/img/homepage/category-tag/%E6%97%85%E8%A1%8C%E7%9B%B8%E5%86%8C.jpg");
        }
        .box4>ul>:nth-child(7){
            background-image: url("https://static.aimeike.tv/assets/img/homepage/category-tag/%E6%B1%82%E5%A9%9A%E8%A1%A8%E7%99%BD.jpg");
        }
        .box4>ul>:nth-child(8){
            background-image: url("https://static.aimeike.tv/assets/img/homepage/category-tag/%E6%AF%95%E4%B8%9A%E8%A7%86%E9%A2%91.jpg");
        }
        .box4>ul>:nth-child(9){
            background-image: url("https://static.aimeike.tv/assets/img/homepage/category-tag/%E5%AE%9D%E5%AE%9D%E6%88%90%E9%95%BF.jpg");
        }
        .box4>ul>:last-child{
            background-image: url("https://static.aimeike.tv/assets/img/homepage/category-tag/%E5%85%A8%E9%83%A8.jpg");
        }
        .box4 li:hover{
            background-size: 120%;
            background-position: -25px -10px;
            filter: brightness(65%);
        }
    /*  第五层  */
        .box5>ul{
            display: grid;
            grid-template-columns: repeat(3,1fr);
            width: 1140px;
            margin: 0 auto;
            padding: 50px 0;
        }
        .box5{
            text-align: center;
            line-height: 60px;
        }
        .box5 img{
            height: 60px;
        }
    /*  第六层  */
        .box6{
            width: 100%;
            background-color: #f7f7f8;
            line-height: 60px;
            padding: 50px 0;
            text-align: center;
        }
        .box6>div{
            width: 1140px;
            display: flex;
            justify-content: center;
            margin: 0 auto;
        }

        .box6 ul>li{
            margin-left: 20px;
            font-size: 18px;
            color: #999999;
            line-height: 70px;
            text-align: left;
        }
        .box6>button{
            all: unset;
            width: 154px;
            height: 40px;
            line-height: 40px;
            border-radius: 2px;
            background-color: #4bcabb;
            color: white;
            text-align: center;
        }
    /*  第三层  */
        .box3{
            padding: 50px 0;
        }
        .box3>ul{
            width: 1000px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(4,1fr);
        }
        .box3 li{
            height: 130px;
            background-repeat: no-repeat;
            background-size: 100%;
            font-size: 12px;
            margin: 10px;
            display: flex;
            align-items: flex-end;
        }
        .box3>ul>:first-child{
            background-image: url("https://blog.aimeike.tv/blog/2017/11/%E5%BF%AB%E9%97%AA%E5%B9%BF%E5%91%8A.jpg");
        }
        .box3>ul>:nth-child(2){
            background-image: url("https://blog.aimeike.tv/blog/2017/08/music.jpg");
        }
        .box3>ul>:nth-child(3){
            background-image: url("https://blog.aimeike.tv/blog/2017/08/write.jpg");
        }
        .box3>ul>:nth-child(4){
            background-image: url("https://blog.aimeike.tv/blog/2017/08/videoedit.jpg");
        }
        .box3>ul>:nth-child(5){
            background-image: url("https://blog.aimeike.tv/blog/2017/08/filter.jpg");
        }
        .box3>ul>:nth-child(6){
            background-image: url("https://blog.aimeike.tv/blog/2017/08/order-chaos.jpg");
        }
        .box3>ul>:nth-child(7){
            background-image: url("https://blog.aimeike.tv/blog/2017/08/videoclips.jpg");
        }
        .box3>ul>:nth-child(8){
            background-image: url("https://blog.aimeike.tv/blog/2017/08/123steps.jpg");
        }
        .box3 a{
            color: #fcfcfc;
            padding-left: 10px;
            width: 100%;
            height: 40px;
            box-sizing: border-box;
            background-color: rgba(0,0,0,.25);
        }
        .box3>ul>li:hover{
            background-size: 120%;
            background-position: -25px -10px;
        }
    /*  第七层  */
        .box7{
            background-image: url("https://static.aimeike.tv/assets/img/homepage/media/media.jpg");
            background-repeat: no-repeat;
            width: 100%;
            height: 320px;
            box-sizing: border-box;
            text-align: center;
            padding-top: 60px;
        }
        .box7 img{
            height: 60px;
            width: 170px;
        }
        .box7>div{
            margin: 50px auto;
            width: 1170px;
            display: flex;
            justify-content: space-between;
        }
        .box7>h1:after{
            display: block;
            content: "";
            width: 40px;
            margin: 20px auto;
            height: 1px;
            background-color: white;

        }
    </style>
</head>
<body>
<div class="head">
    <div class="head1">
        <img width="100px" height="30px" src="https://static.aimeike.tv/assets/img/logo/logo.png">
        <ul>
            <li>首页</li>
            <li>视频模版</li>
            <li>会员特权</li>
            <li>登录</li>
            <li>注册</li>
        </ul>
    </div>
</div>
<div class="box">
    <video width="100%" autoplay muted loop src="https://static.aimeike.tv/assets/videos/banners/albumvideo.mp4">
        浏览器不支持
    </video>
    <div>
        <h1 style="font-size: 40px">视频制作如此简单</h1>
        <p style="font-size: 20px">一款强大的在线制作软件，5分钟就能快速上手</p>
        <button>免费试用</button>
        <a style="font-size: 14px;color: #fcfcfc" href="#">点击查看介绍视频</a>
    </div>
</div>
<div class="box2">
    <h1>如何使用</h1>
    <p style="color: #999999">制作精美视频，仅需三步</p>
    <ul>
        <li><span style="display: block;margin-bottom: 30px;" class="iconfont icon-sousuoxiao"></span>挑选模板</li>
        <li> > </li>
        <li><span style="display: block;margin-bottom: 30px;" class="iconfont icon-bijiben"></span>上传照片和视频</li>
        <li> > </li>
        <li><span style="display: block;margin-bottom: 30px;" class="iconfont icon-fenxiang"></span>制作并分享</li>
    </ul>
    <div class="box2-btn">立即使用</div>
    <a href="#">查看新手指南 > ></a>
</div>
<div class="box4">
    <h1>为各类应用场景而设计</h1>
    <p style="font-size: 14px;color: #999999">超过百款专业团队精心设计的视频模板，使用它们您也可以立刻做出惊艳的视频</p>
    <ul>
        <li>婚礼视频</li>
        <li>企业宣传</li>
        <li>年会视频</li>
        <li>生日祝福</li>
        <li>同学聚会</li>
        <li>旅行相册</li>
        <li>求婚表白</li>
        <li>毕业视频</li>
        <li>宝宝成长</li>
        <li> > </li>
    </ul>
</div>
<div class="box5">
    <h1>功能强大，使用简单</h1>
    <p style="font-size: 18px;color: #999999">支持各种电子相册视频编辑功能，智能化操作节省时间，5分钟上手</p>
    <ul>
        <li>
            <img src="img/框架_frame23.png">
            <h5 style="font-size: 18px;">免费试做简单易用</h5>
            <p style="line-height: 30px;font-size: 14px;color: #999999">无需专业视频制作知识
                <br />
                在线制作5分钟上手
                <br />
                免费试做，满意后付费下载</p>
        </li>
        <li>
            <img src="img/1080p-resolution.png">
            <h5 style="font-size: 18px;">支持下载大屏播放</h5>
            <p style="line-height: 30px;font-size: 14px;color: #999999">蓝光超清1080P分辨率
                <br />
                支持下载MP4文件格式
                <br />
                可在宴会LED大屏播放</p>
        </li>
        <li>
            <img src="img/分享.png">
            <h5 style="font-size: 18px;">一键分享到朋友圈</h5>
            <p style="line-height: 30px;font-size: 14px;color: #999999">在线分享到微信群和朋友圈
                <br />
                支持微博、qq空间等各大社交网站
                <br />
                商家版支持自定义品牌信息</p>
        </li>
        <li>
            <img src="img/视频剪辑.png">
            <h5 style="font-size: 18px;">专业的视频剪辑体验</h5>
            <p style="line-height: 30px;font-size: 14px;color: #999999">可上传照片和视频素材
                <br />
                在线编辑照片、剪辑视频
                <br />
                支持使用视频原声</p>
        </li>
        <li>
            <img src="img/参数调节.png">
            <h5 style="font-size: 18px;">强大的调色和滤镜功能</h5>
            <p style="line-height: 30px;font-size: 14px;color: #999999">调整视频色温、色调、饱和度等参数
                <br />
                修复拍摄期间产生的曝光问题
                <br />
                多款滤镜让素材呈现更多风格</p>
        </li>
        <li>
            <img src="img/Headset-2.png">
            <h5 style="font-size: 18px;">支持自定义背景音乐</h5>
            <p style="line-height: 30px;font-size: 14px;color: #999999">
                精选音乐库可供挑选
                <br />
                支持上传自己的音乐
                <br />
                提供合适的默认背景音乐
            </p>
        </li>
    </ul>
</div>
<div class="box6">
    <h1>满足不同场合视频播放需求</h1>
    <p style="color: #999999;font-size: 16px;">即可一键分享到手机或下载到电脑播放，也支持电视、投影仪和LED等大屏播放</p>
    <div>
        <img src="https://static.aimeike.tv/assets/img/homepage/index-use-scenarios.png">
        <ul>
            <li>·一键分享各大主流社交媒体</li>
            <li>·MP4视频格式兼容主流播放器</li>
            <li>·支持蓝光超清分辨率（1920x1080）</li>
            <li>·适用于投影仪、电视、LED等宴会大屏</li>
        </ul>
    </div>
    <p style="color: #999999;font-size: 14px">升级至蓝光超清分辨率需付费，可免费预览视频效果，修改满意后再付费下载</p>
    <button>立即注册</button>
</div>
<div class="box3">
    <h1 style="text-align: center;margin: 10px auto 50px auto">新手入门</h1>
    <ul>
        <li>
            <a href="#">5分钟教你制作闪眼的年会开场视频</a>
        </li>
        <li>
            <a href="#">制作照片视频时选背景音乐有多关键？视频氛围全靠它</a>
        </li>
        <li>
            <a href="#">为每个素材写描述：带给观众一个生动的照片视频故事</a>
        </li>
        <li>
            <a href="#">视频素材剪辑技巧：令照片视频制作出的效果更具感染力</a>
        </li>
        <li>
            <a href="#">堪比PS的工具！用系统滤镜制作更绚丽的照片视频</a>
        </li>
        <li>
            <a href="#">整理素材顺序：制作照片视频最基本的编辑方式</a>
        </li>
        <li>
            <a href="#">照片视频模板样片素材是什么？用它能帮大忙！</a>
        </li>
        <li>
            <a href="#">找到心仪的照片视频制作模板，需这三招</a>
        </li>
    </ul>
</div>
<div class="box7">
    <h1 style="color: white">多家权威媒体推荐</h1>
    <div>
        <img src="https://static.aimeike.tv/assets/img/homepage/media/china.png">
        <img src="https://static.aimeike.tv/assets/img/homepage/media/36kr.png">
        <img src="https://static.aimeike.tv/assets/img/homepage/media/sohu.png">
        <img src="https://static.aimeike.tv/assets/img/homepage/media/yesky.png">
        <img src="https://static.aimeike.tv/assets/img/homepage/media/heiguang.png">
    </div>
</div>
</body>
</html>